const path = require('path');

// 清空默认的main.js文件，关键：每次webpack启动都会先删除dist目录下的文件
// const {CleanWebpackPlugin} = require('clean-webpack-plugin');

// 清空.license文件
const TerserPlugin = require('terser-webpack-plugin');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const webpack = require('webpack');

var getHtmlConfig = function (name) {
  return {
    template: './src/view/' + name + '.html',    // 模板文件
    filename: 'view/' + name + '.html',          // 输出文件
    inject: true,                          // 是否自动注入同名js文件
    hash: true,                          // 是否添加hash值(表示版本号)
    chunks: ['common', name],               // 与该html相关的入口js  (每次都把common导入)
    minify: {
      collapseInlineTagWhitespace: false,    // 是否压缩html中的空格
    }
  }
}

var config = {
  entry: {
    'user_main': ['./src/page/user_main/index.js'],
    'common': ['./src/page/common/index.js'],
    'login': ['./src/page/login/index.js'],
    'Order': ['./src/page/Order/index.js'],
    'myOrder': ['./src/page/myOrder/index.js'],
    'ProductManager': ['./src/page/ProductManager/index.js'],
    'ShoppingCart': ['./src/page/ShoppingCart/index.js'],
    'UserManager': ['./src/page/UserManager/index.js'],
    'register': ['./src/page/register/index.js'],
    'ShoppingCart': ['./src/page/ShoppingCart/index.js']
  },
  output: {
    filename: 'js/[name].js',
    path: path.resolve(__dirname, 'dist'),    // 打包之后的路径
  },
  devServer: {
    port: 8888,
    static: {
      directory: path.resolve(__dirname, 'dist')     // 服务器根目录
    },
    client: {
      logging: 'none',       //  关闭浏览器控制台的日志
      overlay: false,        //  关闭错误覆盖层（不弹红屏）
      progress: false,       //  关闭编译进度
    },
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,          // 提取css文件
            options: {
              publicPath: '../'                         // css引用资源的相对路径（相对于导出的html文件）
            }
          },
          'css-loader',
        ]
      },
      {
        // 正则匹配图片
        test: /\.(png|jpg|gif|jpeg)$/,
        //webpack5版本
        type: 'asset/resource',
        generator: {
          //图片路径，存放在dist/images/
          filename: 'images/[name][ext]',
          publicPath: '../'  // 添加publicPath确保路径正确（相对于最终生成的html的资源路径）-> 就是路径错误时会改为../
        }
      },
      {
        test: /\.html$/,
        use: {
          loader: 'html-loader',
          options: {
            sources: {
              // html中引用到的图片也会被打包 
              // 图片路径有错误时也能够正确处理（修改为资源文件的路径）
              list: [
                {
                  tag: 'img',
                  attribute: 'src',
                  type: 'src',
                },
              ],
            },
          },
        },
      },
      {
        test: /\.htm$/,
        use: {
          loader: 'html-loader',
          options: {
            sources: {
              // html中引用到的图片也会被打包 
              // 图片路径有错误时也能够正确处理（修改为资源文件的路径）
              list: [
                {
                  tag: 'img',
                  attribute: 'src',
                  type: 'src',
                },
              ],
            },
          },
        },
      },
    ]
  },
  plugins: [
    // new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    }),
    new HtmlWebpackPlugin(getHtmlConfig("UserManager")),
    new HtmlWebpackPlugin(getHtmlConfig("user_main")),
    new HtmlWebpackPlugin(getHtmlConfig("login")),
    new HtmlWebpackPlugin(getHtmlConfig("ProductManager")),
    new HtmlWebpackPlugin(getHtmlConfig("register")),
    new HtmlWebpackPlugin(getHtmlConfig("ShoppingCart")),
    new HtmlWebpackPlugin(getHtmlConfig("myOrder")),
    new HtmlWebpackPlugin(getHtmlConfig("Order")),
    new webpack.HotModuleReplacementPlugin()         // 热替换
  ],
  optimization: {
    minimize: false,                           // 是否对代码进行压缩
    minimizer: [
      new TerserPlugin({
        extractComments: false,             // 不将注释提取到单独的文件
      }),
    ],
    splitChunks: {
      cacheGroups: {
        commons: {
          name: 'util',             // 提取出来的文件命名
          chunks: 'all',              // 提取所有的chunk
          minChunks: 2,                  // 至少被引用两次的chunk才会被提取
          minSize: 0,                  // 提取的文件最小为0字节
        },
        vendors: {
        }
      }
    }
  },
  resolve: {
    alias: {                                                // 设置路径别名
      page: path.resolve(__dirname, './src/page'),
      util: path.resolve(__dirname, './src/util'),
      view: path.resolve(__dirname, './src/view'),
      service: path.resolve(__dirname, './src/service'),
      node_modules: path.resolve(__dirname, './node_modules'),
      dist: path.resolve(__dirname, './dist'),
    }
  },
  externals: {
    'jquery': 'window.jQuery'            // 将已经通过cdn导入的jquery作为外部依赖，可以通过模块导入
    // 好像必须要在html中用cdn导入了
  },
  mode: 'development'                    // 开发模式
};

module.exports = config;